
import Login from "@/pages/Login/Login";
import React,{ lazy } from "react";
import { Routes,Route,Navigate} from "react-router-dom"
const About = lazy(()=>import("../pages/About"))
const Home = lazy(()=>import("../pages/Home"))
const Message = lazy(()=>import("../pages/Message"))
const News = lazy(()=>import("../pages/News"))
const Goods = lazy(()=>import("../pages/Goods/index"))
const Spec = lazy(()=>import("../pages/Spec/index"))
// const router = () => (
//   <Routes>
//     <Route path="/" element={<App/>}>
//       <Route path="/" element={<Navigate to="/home"/>}></Route>
//       <Route path="/home" element={<Home/>}></Route>
//       <Route path="/about" element={<About/>}></Route>
//     </Route>
//   </Routes>
// )
const withLoadingComponent = (comp:JSX.Element) => (
  <React.Suspense fallback={<div>Loading...</div>}>
    {comp}
  </React.Suspense>
)
const router =[
  {
    path:"/",
    element:<Navigate to="/home"/>,
  },
  {
    path:"/home",
    element:withLoadingComponent(<Home />),
    children:[
      {
        path:"news",
        element:withLoadingComponent(<News />)
      },
      {
        path:"message",
        element:withLoadingComponent(<Message />)
      },
      {
        path:"goods",
        element:withLoadingComponent(<Goods />)
      },
      {
        path:"spec",
        element:withLoadingComponent(<Spec />)
      },
    ]
  },
  {
    path:"/about",
    element:withLoadingComponent(<About />)
  },
  {
    path:"/login",
    element:<Login />
  }
]

export default router